<template>
	<view>
		<van-toast id="van-toast" />
		<view class="">
			<van-nav-bar title="投诉商家" left-text="返回" left-arrow @click-left="onClickLeft" />
		</view>
		<view class="box">
			<view class="tousu">
				<view class="">
					<text style="color: red;">*</text>Hi,请输入您给商家存在的问题吧～
				</view>
				<view class="srk">
					<textarea v-model="describe" id="" cols="30" rows="10"
						placeholder="请描述商家问题，某个商品无法使用/不好用、欺诈消费者、货不对板、或其他建议(5个字以上)"></textarea>
				</view>

				<view class="picture">
					<view class="" style="font-size:12px;">
						上传“有效图片”可以让问题优先被发现哦
					</view>

					<button @click="chooseimg" class="sc">上传</button>
					<image style="width: 80rpx;height: 80rpx;" v-for="(item, index) in msgimg" :key="index" :src="item">
					</image>
				</view>
			</view>
		</view>
		<view class="phone">
			<view><span style="font-size:18px;">联系电话</span>
				<span class="jjwt">解决过程中,方便我们与您联系</span>
			</view>
			<view class="phonesr"><input type="text" v-model="number" placeholder="请输入您的手机号码"></view>
		</view>
		<view class="fabiao">
			<view class="an" @click="fabiao">
				发表
			</view>
		</view>
	</view>
</template>

<script>
	// import { error } from 'console';
import request from '../../com/request.js'
	import Toast from "../../wxcomponents/vant/toast/index";
	export default {
		data() {
			return {
				xianshi: false,
				describe: '',
				fileList: [],
				number: '',
				msgimg: [],
			}
		},
		methods: {
			chooseimg() {
				console.log(1111)
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {

						let tempFilePaths = res.tempFilePaths;
						// console.log(tempFilePaths[0]);
						uni.uploadFile({
							url: 'http://localhost:8000/api/common/uploadfile', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'file': tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data);
								// this.msgimg = JSON.parse(uploadFileRes.data).data
								this.msgimg.push(JSON.parse(uploadFileRes.data).data)
								console.log(this.msgimg, 75);
								// this.sendMsg()
							}
						});

					}
				});
			},

			onClickLeft() {
				this.$Toast('返回');
			},
			fabiao() {
				var that = this
				request({
					url: '.api/complaintTable/get',
					data: {
						commodityId: 1,
						sellerTel: this.number,
						complaintDetails: this.describe,
						complaintImg: this.msgimg[0],
						state: 0,
					},
					method: "POST",
					dataType: 'json',
					success: function(resp) {
						console.log(resp)
					},
				})
			},
		}
	}
</script>

<style>
	.box {
		width: 740rpx;
		height: 600rpx;
		/* border: 1px solid red; */
	}

	/* .tousu {} */
	.srk {
		margin-top: 10px;
	}

	.srk textarea {
		width: 680rpx;
		height: 150px;
		resize: none;
		padding: 10px;
		border: 1px solid black;
	}

	.srk textarea::-webkit-input-placeholder {
		font-size: 12rpx;
	}

	.picture {
		width: 600rpx;
		height: 300rpx;
	}

	.phone {
		width: 700rpx;
		height: 100rpx;
		margin: 0 auto;
		/* font-size: 18px; */
	}

	.jjwt {
		color: darkgray;
		margin-left: 5px;
		font-size: 14px;
	}

	.phonesr {
		margin-top: 7px;
		height: 100px;
	}

	.phonesr input {
		width: 400rpx;
		height: 50rpx;
		border: 0.5px solid darkgray;
		border-radius: 10px;
	}

	.fabiao {
		width: 700rpx;
		height: 300rpx;
		/* text-align: end; */
		display: flex;
		justify-content: flex-end;
		line-height: 300px;

	}

	.an {
		width: 100rpx;
		height: 100rpx;
		background-color: yellow;
		line-height: 100rpx;
		text-align: center;
		border-radius: 15px;
	}

	.sc {
		width: 100rpx;
		height: 50rpx;
		font-size: 20rpx;
		/* color: white; */
		background-color: yellow;
	}
</style>
